<template>
  <div class="inter">
    <loading :state="state"></loading>
    <div class="sec_in">
      <img :src="this.$Public.webPageImg+'qr-logo.png'" class="logoo">
    </div>
    <img :src="data.url" class="code1" alt="一起瘦">
    <div class="thr">
      <p class="code2">{{data.name}}</p>
    </div>
    <p class="code-t">识别图中二维码购买</p>
    <p class="code-t">开启个人零售新时代</p>
  </div>
</template>
<script type="text/ecmascript-6">
  export default {
    name: 'code',
    data() {
      return {
        data: this.$route.query,
        Url: '',
        state: true
      };
    },
    created() {
      // 调用获取显示权限接口方法
      this.$Spread.getAllState().then(res => {
        this.btnState = res;
        delete this.btnState['status'];
        if (this.btnState.qr.status === 'ok') {
          this.data = this.btnState.qr;
          this.data.url = 'http://' + this.data.url;
        }
        this.state = false;
      }, (err) => {
        this.state = false;
        console.log(err);
      });
    },
    methods: {}
  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl"
  .inter {
    qr_bg()
    flex-y();
    width: 100vw;
    height: 100vh - 7vw;
    justify-content: center
    background: url(http://bainm.oss-cn-beijing.aliyuncs.com/webPage/qr_bk.jpg) no-repeat;
    background-size: cover;
  }

  .space {
    space()
  }

  .logo {
    width: 100%;
    position: absolute;
    top: 3vw;
    left: 0
  }

  .logoo {
    width: vw(126px)
    margin-bottom: 2vw;
  }

  .thr {
    text-align center;
    & p {
      word(14px, #333);
      line-height: 3
    }
  }

  .code1 {
    width: vw(192px);
    height: vw(192px);
  }

  .sec_in {
    text-align: center;
    width: 100vw;
    position: relative
  }

  .code-t {
    word(16px, #333);
  }
</style>
